body{
    width: 100vw;
    height: 100vh;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-auto-flow: column;
    gap: 10px;
}

article{
    width: 400px;
    height: 400px;
    border: solid 1px black;
    display: grid;
    justify-items: center;
    align-items: center;
    position: relative;
    perspective: 900px;
    div{
        width: 200px;
        height: 200px;
        border: solid 1px red;
        position: absolute;
        display: grid;
        align-items: center;
        justify-content: center;
        transition-duration: 1s;
        &:nth-child(1){
            background-color: salmon;
            transform: rotateX(-180deg);
        }
        &:nth-child(2){
            background-color: skyblue;
            backface-visibility: hidden; 
        }
    }
    &:hover{
        div:nth-child(1){
            transform:rotateX(0deg);
        }
        div:nth-child(2){
            transform:rotateX(180deg);
        }
    }
}